<template>
    <div>
 <el-table
        v-bind:data="tableList"                           
        border 
        style="width: 100%">
              <el-table-column
                     prop="name"
                     label="广告物料名称"
                     width="180">
                     <template slot-scope="scope">
                        <p><a>{{scope.row.name}}</a></p>
                        <p>ID: {{scope.row.id}}</p>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="content"
                     label="广告物料预览"   >
                      <template slot-scope="scope">

                       <div v-if="scope.row.type=='image'" class="adcontent" >
                        <el-image 
                         :src="filter_content(scope.row.content)"
                         :preview-src-list="[filter_content(scope.row.content)]">
                         </el-image>  
                        </div>
                        <div v-else-if="scope.row.type=='stream'" class="stream">
                            <stream-view-san :cntype="scope.row.cntype" :cnrow="scope.row.content"></stream-view-san>
                        </div>
                       <div v-else class="adcontent">
                           <div  v-html="filter_content(scope.row.content)"></div>
                       </div> 
                      </template>
                     </el-table-column>
             <el-table-column
                     prop="width"
                     label="尺寸"  class="center" >
                     <template slot-scope="scope">
                        <span v-if="scope.row.width">{{scope.row.width}} * {{scope.row.height}}</span>
                        <span v-else> -- </span>
                      </template>

                     </el-table-column>
             <el-table-column
                     prop="type"
                     label="类型"   >
                     <template slot-scope="scope">
                           <span>{{scope.row.type|filter_type}}</span>
                      </template>
                  </el-table-column> 
                
            <el-table-column
                     prop=""
                     label="操作"  width="100" >
                     <template slot-scope="scope">
                           <el-button 
                           v-if="showSelect"
                           size="mini" type="text"
                           @click="handleSelect(scope.$index, scope.row)">选用</el-button>

                           <el-button 
                           v-if="showDelete"
                           size="mini" type="text"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                      </template>
                  </el-table-column> 
          </el-table>       
    </div>
</template>

<script>
import Options from './Options.js';

export default {
  components: {},
  props:{
      'selectMediasList':{
          type: Array, default:[],
      },
      'showSelect':{
          type: Boolean, default: false,
      },
      'showDelete':{
          type: Boolean, default: false,
      }
  },
  data() {
     return {
        //  tableList:[]
     }
  },
    filters:{
    filter_disabled(value) {
        return Options.filter_disabled(value);
    },
    filter_type(value) {
        return Options.filter_medias_type(value);
    },
    // 过滤显示广告内容出来，比如图片

},
  computed: {
    tableList(){
        return  this.selectMediasList;
    }
  },
  methods:{
      // v-hmtl 指令 值可以用 method方法处理数据；
        filter_content :Options.filter_medias_content,

        handleSelect(index, row){
             this.$emit("onselectchange", row);
        },
        //移除一个 项目
        handleDelete(index, row){
            this.selectMediasList.splice(index,1);
        }

  }
}
</script>